<template>
  <view>
    <view class="list-bg">
      <view class="pop-title">
        <image
          class="icon-left"
          src="/static/shopIcon/back@2x.png"
          @click="backPrePage"
        />
        <view class="title">选择自提日期时间</view>
        <view
          class="close"
          @click="closePopFn"
        >
          <image
            class="close-icon"
            src="/static/image/close.png"
          />
        </view>
      </view>
      <div class="pop-content">
        <LeftNav
          :nav-list="dateList"
          :nav-whith="220"
          :nav-selected.sync="navSelected"
          bg-active="#fff"
          bg-default="#f5f5f5"
          show-key="label"
          :swiper-height="450"
          @leftNavFn="leftNavFn"
        />
        <scroll-view
          class="right-content"
          :scroll-y="true"
          :scroll-with-animation="true"
          :enable-back-to-top="true"
          :style="'width:calc(100% - 220rpx);max-height:704rpx;float:left;'"
        >
          <view class="item-content clearfix">
            <view
              v-for="(item, index) in amPmList"
              :key="index"
              :class="item.disabled ? 'class-item disabled-btn' : (item.value === currentTakeTime.value ? 'class-item-select class-item' : 'class-item')"
              @click="selectDateFn(item)"
            >
              {{ item.label }}
            </view>
          </view>
        </scroll-view>
      </div>
      <view v-if="0" class="pop-content">
        <LeftNav
          :nav-list="deliverTimeList"
          :nav-whith="220"
          :nav-selected.sync="navSelected"
          :bg-active="'#fff'"
          :bg-default="'#f5f5f5'"
          :show-key="'label'"
          :swiper-height="470"
          @leftNavFn="leftNavFn"
        />
        <scroll-view
          class="right-content"
          :scroll-y="true"
          :scroll-with-animation="true"
          :enable-back-to-top="true"
          :style="'width:calc(100% - 220rpx);max-height:704rpx;float:left;'"
        >
          <view class="item-content clearfix">
            <view
              v-for="(item, index) in timeList"
              :key="index"
              :class="(curHour >=12 && index==0 && navSelected==0) ? 'class-item disabled-btn' : (timeVal == item.code ? 'class-item-select class-item' : 'class-item')"
              @click="(curHour >=12 && index==0 && navSelected==0) ? '' : selectItemFn('timeVal', item.code)"
            >
              {{ item.label }}
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="btn-box">
        <button class="btn confirm-btn" @click="confirmFn">确定</button>
      </view>
    </view>
  </view>
</template>

<script>
import LeftNav from '@/components/left-nav'
import {
  getSystemTime
} from '@/common/common'
export default {
  name: 'SelectSelfDeliveryTime',
  components: {
    LeftNav,
  },
  props: {
    selfAddressModelObj: {
      type: Object,
      default: null
    },
    selfPickupTimeInfo: {
      type: Object,
      default: null
    },
    selfTakeTime: {
      type: String,
      default: ''
    },
    curDeliverWay: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      curHour: 0,
      swiperHeight: 0,
      navSelected: 0,
      deliverTimeList: [],
      selectedDay: {},
      timeVal: '',
      timeList: [
        {
          code: '12:00:00',
          label: '上午'
        },
        {
          code: '18:00:00',
          label: '下午'
        },
      ],
      radioCustomStyle: {
        width: '28rpx',
        float: 'left',
        margin: '8rpx 0 0 20rpx'
      },
      dateList: [],
      amPmList: [],
      currentTakeTime: undefined,
    }
  },
  computed: {
    curSelfAddressModelObj() {
      return this.selfAddressModelObj
    }
  },
  mounted() {
    console.log('mounted!');
    this.pageInitFn()
  },
  methods: {
    async pageInitFn() {
      const systemTime = await getSystemTime()
      this.curHour = new Date(systemTime).getHours()
      // console.log('curSelfAddressModelObj :>> ', this.curSelfAddressModelObj);
      this.deliverTimeList = this.curSelfAddressModelObj.selfTakeTimeList
      if (this.deliverTimeList) {
        // console.log('deliverTimeList :>> ', this.deliverTimeList);
        this.selectedDay = this.deliverTimeList[0]
        this.timeVal = this.deliverTimeList[0].selfTakeTime
        // console.log('this.deliverTimeList :>> ', this.deliverTimeList);
      }

      const { selfTakeTime, selfPickupTimeInfo } = this
      const [takeDate, takeWeek, takeAmPm] = selfTakeTime.split(' ')
      const { selfPickupTime, selfPickupDate, weekStr: selfPickupWeek, amPm: selfPickupAmPm, selectDate } = selfPickupTimeInfo
      this.dateList = selectDate.map((item, index) => {
        const { dateStr, weekStr, amPmArray } = item
        const dateArr = dateStr.split('-')
        const year = dateArr[0]
        const month = dateArr[1]
        const day = dateArr[2]
        const monthDateStr = `${month}月${day}日`
        const week = weekStr.replace('【', '').replace('】', '')
        const monthDateWeekStr = `${monthDateStr} ${week}`
        const takeDateArr = takeDate.replace('日', '').split('月')
        const isToday = takeDateArr[0] === month && takeDateArr[1] === day
        const amPmList = amPmArray.map(j => {
          const obj = {
            label: j.amPm,
            value: `${monthDateWeekStr} ${j.amPm}`,
            disabled: j.enable === 0,
            selfRequested: j.selfRequested,
            selfPickupTime,
            selfPickupDate,
            selfPickupWeek,
            selfPickupAmPm,
            week,
            weekStr,
            dateStr,
            monthDateStr,
            monthDateWeekStr,
            year,
            month,
            day,
          }
          if (isToday && j.amPm === takeAmPm) {
            this.currentTakeTime = obj
          }
          return obj
        })
        if (isToday) {
          this.navSelected = index
          this.amPmList = amPmList
        }
        return {
          label: monthDateWeekStr,
          selected: isToday,
          amPmList
        }
      })
    },
    leftNavFn(val) {
      this.selectedDay = val
      this.timeVal = ''
      if (val.amPmList) {
        this.amPmList = val.amPmList
      }
      // this.amPmList = val.amPmList
    },
    /*选择按钮方法*/
    selectItemFn(typeName, val) {
      // console.log('selectItemFn :>> ', val);
      this[typeName] = val
      this.selectedDay.selfTakeTime = val
      this.selectedDay.timePeriodLabel = val == '12:00:00' ? '上午' : '下午'
    },
    // 选中当前日期
    selectDateFn(item) {
      if(item.disabled){
        return
      }
       console.log('selectDateFn :>> ', item);
      this.currentTakeTime = item
      // this.currentTakeTime = item.value
    },
    /*确认*/
    confirmFn() {
      // this.curSelfAddressModelObj.selfTakeTimeObj = this.selectedDay
      // console.log('selectedDay :>> ', this.selectedDay);
      // this.$emit('update:selfAddressModelObj', this.curSelfAddressModelObj)
      // this.$emit('updateZtTime', this.selectedDay)
      const { label: amPm, value, dateStr, weekStr, year, month, day, week, selfRequested } = this.currentTakeTime
      const pickupTime = `${dateStr} ${weekStr} ${amPm || ''}`
      const label = `${value} ${selfRequested ? selfRequested + '点后' : ''}`.trim()
      this.$emit('updateZtTime', {
        amPm: amPm,
        dateStr: dateStr.replace(/-/ig, ''),
        day: day,
        label: label,
        month: month,
        selfPickupTime: pickupTime.trim(),
        selfTakeTime: amPm === '上午' ? '12:00:00' : '18:00:00',
        week: week,
        year: year,
        selfRequested: selfRequested,
      })
      this.closePopFn()
    },
    closePopFn() {
      this.$emit('closePopFn')
    },
    /*返回上一页*/
    backPrePage() {
      this.$emit('update:curDeliverWay', 'zt')
      const backPageParams = {
        customParams: {
          popPage: 'deliverWay'
        },
      }
      this.$emit('backPageFn', backPageParams)
    }
  }
}
</script>

<style scoped lang="scss">
@import "../static/scss/index";
.list-bg{
  height: 1122rpx;
  .icon-left{
    width: 24rpx;
    height: 48rpx;
    float: left;
    margin: 21rpx 24rpx 0 0;
  }
  .pop-content{
    height: 450rpx;
    .class-item{
      width: 216rpx;
      padding: 0 0;
      text-align: center;
      margin: 0 0 16rpx 16rpx;
    }
    .class-item-select{
      padding: 0 0;
      text-align: center;
      width: 212rpx;
    }
    .disabled-btn{
      color: $uni-bg-color;
      background: $uni-text-color-disable;
    }
  }
}
</style>
